<template>
  <div class="calendar">
    <n-space
      justify="space-between"
      style="width: 100%; margin-bottom: 12px"
    >
      <h5>{{ formatYearMonth }}</h5>
      <n-space>
        <n-icon
          size="24"
          class="pointer"
          @click="handleChangeMonth('prev')"
        >
          <chevron-back-outline />
        </n-icon>
        <n-icon
          size="24"
          class="pointer"
          @click="handleChangeMonth('next')"
        >
          <chevron-forward-outline />
        </n-icon>
      </n-space>
    </n-space>
    <div class="calendar-title">
      <div>一</div>
      <div>二</div>
      <div>三</div>
      <div>四</div>
      <div>五</div>
      <div>六</div>
      <div>日</div>
    </div>
    <div class="calendar-container">
      <div
        v-for="i in firstDay"
        :key="i"
        class="calendar-uncurrent"
        @click="handleChangeMonth('prev')"
      >
        {{ lastMonthDays - firstDay + i }}
      </div>
      <div
        v-for="i in currentMonthDays"
        :key="i"
        :class="[i === selectDay ? 'calendar-select' : '']"
        @click="handleSelectDay(i)"
      >
        {{ i }}
      </div>
      <div
        v-for="i in surplusDays"
        :key="i"
        class="calendar-uncurrent"
        @click="handleChangeMonth('next')"
      >
        {{ i }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ChevronBackOutline, ChevronForwardOutline } from '@vicons/ionicons5'

  const props = withDefaults(
    defineProps<{
      modelValue?: Date
    }>(),
    {
      modelValue: () => new Date()
    }
  )

  const emit = defineEmits(['update:modelValue'])

  // 当月第一天是星期几
  const firstDay = computed(() => {
    const year = props.modelValue.getFullYear()
    const month = props.modelValue.getMonth()
    return new Date(year, month, 1).getDay() - 1
  })

  // 本月有多少天
  const currentMonthDays = computed(() => {
    return new Date(props.modelValue.getFullYear(), props.modelValue.getMonth() + 1, 0).getDate()
  })

  // 上个月有多少天
  const lastMonthDays = computed(() => {
    return new Date(props.modelValue.getFullYear(), props.modelValue.getMonth(), 0).getDate()
  })

  // 格式化年月
  const formatYearMonth = computed(() => formatTime(props.modelValue, 'YYYY年MM月'))
  // 格式化日
  const selectDay = computed(() => Number(formatTime(props.modelValue, 'DD')))
  // 本月最后一天是星期几
  const surplusDays = computed(() => (7 - ((firstDay.value + currentMonthDays.value) % 7)) % 7)

  // 处理选中日期
  const handleSelectDay = (day: number) => {
    const year = props.modelValue.getFullYear()
    const month = props.modelValue.getMonth()
    emit('update:modelValue', new Date(year, month, day))
  }

  // 处理修改月份
  const handleChangeMonth = (type: string) => {
    const date = props.modelValue
    const year = date.getFullYear()
    let month = date.getMonth()
    if (type === 'prev') {
      month -= 1
    } else {
      month += 1
    }
    emit('update:modelValue', new Date(year, month, 1))
  }
</script>

<style scoped lang="scss">
  .calendar {
    display: flex;
    flex-direction: column;

    &-title {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      div {
        text-align: center;
        color: #949493;
        font-size: $fs-sm;
      }
    }
    &-container {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      div {
        margin-top: 4px;
        text-align: center;
        padding: 4px 0;
        color: $text-primary-color;
        border-radius: $radius-sm;
        cursor: pointer;
        font-size: $fs-sm;
        &:not(.calendar-select) {
          &:hover {
            background-color: #f4f7ff;
          }
        }
      }
    }
    &-select {
      background-color: #316eff;
      color: #fff !important;
    }
    &-uncurrent {
      color: #d8d9d8 !important;
    }
  }
</style>
